<!-- pages/checkin/partner.vue -->
<template>
  <view class="container">
    <!-- 顶部激励语 -->
    <view class="motivation-banner">
      <text class="motivation-text">{{todayMotivation}} ✨</text>
    </view>

    <!-- 今日学习内容记录 -->
    <view class="study-record">
      <text class="section-title">📚 今日学习内容</text>
      <view class="subject-list">
        <checkbox-group @change="onSubjectChange">
          <label 
            class="subject-item" 
            :class="{ 'checked': item.checked }"
            v-for="(item, index) in subjects" 
            :key="index"
          >
            <checkbox :value="item.value" :checked="item.checked" color="#A8BF8F"/>
            <text class="subject-name">{{item.emoji}} {{item.name}}</text>
          </label>
        </checkbox-group>
      </view>
    </view>

    <!-- 学习时长统计 -->
    <view class="study-stats">
      <text class="section-title">⏱️ 学习时长统计</text>
      <view class="stats-container">
        <view class="stats-item">
          <text class="stats-value">{{todayHours}}</text>
          <text class="stats-label">今日学习(小时)</text>
          <text class="stats-trend" v-if="todayTrend > 0">↗️ {{todayTrend}}%</text>
          <text class="stats-trend" v-else>↘️ {{todayTrend}}%</text>
        </view>
        <view class="stats-item">
          <text class="stats-value">{{weekHours}}</text>
          <text class="stats-label">本周累计(小时)</text>
          <text class="stats-achievement" v-if="weekTarget">🎯 目标: {{weekTarget}}h</text>
        </view>
        <view class="stats-item">
          <text class="stats-value">{{monthHours}}</text>
          <text class="stats-label">本月累计(小时)</text>
          <text class="stats-rank" v-if="monthRank">🏆 排名: {{monthRank}}</text>
        </view>
      </view>
      <!-- 时长选择器 -->
      <view class="time-picker">
        <text class="time-label">⌛ 今日学习时长</text>
        <picker 
          mode="multiSelector" 
          :range="timeRange" 
          @change="onTimeChange"
          :value="timeIndex"
        >
          <view class="picker-value">
            {{timeRange[0][timeIndex[0]]}}小时{{timeRange[1][timeIndex[1]]}}分钟
          </view>
        </picker>
      </view>
    </view>

    <!-- 打卡内容发布 -->
    <view class="checkin-form">
      <text class="section-title">✍️ 打卡内容</text>
      <view class="mood-selector">
        <text class="mood-label">今日心情:</text>
        <view class="mood-options">
          <text 
            v-for="mood in moods" 
            :key="mood.value"
            :class="['mood-item', selectedMood === mood.value ? 'selected' : '']"
            @click="selectMood(mood.value)"
          >{{mood.emoji}}</text>
        </view>
      </view>
      <textarea 
        class="content-input"
        v-model="content"
        placeholder="记录今天的学习心得，分享你的进步..."
        maxlength="200"
      />
      <view class="word-count">{{content.length}}/200</view>
      
      <!-- 图片上传 -->
      <view class="image-uploader">
        <view 
          class="upload-item" 
          v-for="(img, index) in uploadImages" 
          :key="index"
        >
          <image :src="img" mode="aspectFill"></image>
          <text class="delete-btn" @click="deleteImage(index)">×</text>
        </view>
        <view 
          class="upload-btn" 
          @click="chooseImage" 
          v-if="uploadImages.length < 9"
        >
          <text class="upload-btn-icon">+</text>
          <text class="upload-text">📷 上传图片</text>
        </view>
      </view>

      <!-- 打卡选项 -->
      <view class="checkin-options">
        <view class="option-item">
          <switch color="#A8BF8F" @change="onVisibleChange"/>
          <text class="option-label">👥 仅搭子可见</text>
        </view>
        <view class="option-item">
          <switch color="#A8BF8F" @change="onReminderChange"/>
          <text class="option-label">🔔 每日提醒</text>
        </view>
      </view>

      <!-- 今日标签 -->
      <view class="today-tags">
        <text class="tag" 
          v-for="tag in tags" 
          :key="tag.value"
          :class="{ active: selectedTags.includes(tag.value) }"
          @click="toggleTag(tag.value)"
        >
          {{tag.emoji}} {{tag.name}}
        </text>
      </view>

      <!-- 提交按钮 -->
      <button 
        class="submit-btn" 
        :class="{ 'can-submit': canSubmit }"
        @click="submitCheckin"
      >
        打卡提交 🎉
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      subjects: [
        { name: '政治', value: 'politics', emoji: '📊', checked: false },
        { name: '英语', value: 'english', emoji: '🌍', checked: false },
        { name: '数学', value: 'math', emoji: '📐', checked: false },
        { name: '专业课', value: 'major', emoji: '📚', checked: false }
      ],
      todayHours: '6.5',
      weekHours: '45.5',
      monthHours: '180.0',
      todayTrend: 12.5,
      weekTarget: 50,
      monthRank: '前10%',
      timeRange: [
        Array.from({length: 24}, (_, i) => i + ''),
        Array.from({length: 60}, (_, i) => i + '')
      ],
      timeIndex: [6, 30],
      content: '',
      uploadImages: [],
      isOnlyPartnerVisible: false,
      needReminder: false,
      selectedMood: '',
      selectedTags: [],
      todayMotivation: '今天也是充满希望的一天',
      moods: [
        { value: 'happy', emoji: '😊' },
        { value: 'excited', emoji: '🤗' },
        { value: 'tired', emoji: '😪' },
        { value: 'stressed', emoji: '😣' },
        { value: 'proud', emoji: '😎' }
      ],
      tags: [
        { name: '效率满满', value: 'efficient', emoji: '⚡' },
        { name: '稳步前进', value: 'steady', emoji: '🚶' },
        { name: '需要加油', value: 'needboost', emoji: '💪' },
        { name: '收获满满', value: 'fruitful', emoji: '🌟' }
      ]
    }
  },
  computed: {
    canSubmit() {
      return this.content.trim().length > 0 && 
             this.subjects.some(s => s.checked) &&
             this.selectedMood !== ''
    }
  },
  methods: {
    onSubjectChange(e) {
      const values = e.detail.value
      this.subjects.forEach(subject => {
        subject.checked = values.includes(subject.value)
      })
    },
    onTimeChange(e) {
      this.timeIndex = e.detail.value
    },
    onVisibleChange(e) {
      this.isOnlyPartnerVisible = e.detail.value
    },
    onReminderChange(e) {
      this.needReminder = e.detail.value
    },
    selectMood(mood) {
      this.selectedMood = mood
    },
    toggleTag(tag) {
      const index = this.selectedTags.indexOf(tag)
      if (index > -1) {
        this.selectedTags.splice(index, 1)
      } else {
        this.selectedTags.push(tag)
      }
    },
    chooseImage() {
      uni.chooseImage({
        count: 9 - this.uploadImages.length,
        success: (res) => {
          this.uploadImages = [...this.uploadImages, ...res.tempFilePaths]
        }
      })
    },
    deleteImage(index) {
      this.uploadImages.splice(index, 1)
    },
    submitCheckin() {
      if (!this.canSubmit) {
        uni.showToast({
          title: '请完善打卡内容',
          icon: 'none'
        })
        return
      }

      uni.showLoading({
        title: '提交中...'
      })

      setTimeout(() => {
        uni.hideLoading()
        uni.navigateTo({
          url: '/pages/partner/checkIn-success',
          success: () => {
            this.resetForm()
          },
          fail: (err) => {
            console.error('页面跳转失败：', err)
            uni.showToast({
              title: '跳转失败',
              icon: 'none'
            })
          }
        })
      }, 1500)
    },
    resetForm() {
      this.content = ''
      this.uploadImages = []
      this.subjects.forEach(s => s.checked = false)
      this.selectedMood = ''
      this.selectedTags = []
    }
  }
}
</script>

<style>
.container {
  flex: 1;
  background-color: #f8f8f8;
  padding: 20rpx;
}

.motivation-banner {
  background: linear-gradient(45deg, #A8BF8F, #87b06d);
  padding: 30rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
}

.motivation-text {
  color: #fff;
  font-size: 32rpx;
  text-align: center;
  display: block;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
}

/* 学习内容记录 */
.study-record {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.subject-list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 20rpx;
  overflow-x: auto;
  padding: 10rpx 0;
}

/* 隐藏滚动条但保留滚动功能 */
.subject-list::-webkit-scrollbar {
  display: none;
}

.subject-item {
  display: flex;
  align-items: center;
  min-width: 200rpx; /* 设置最小宽度 */
  flex-shrink: 0; /* 防止压缩 */
  background-color: #f8f8f8;
  padding: 16rpx 24rpx;
  border-radius: 100rpx; /* 使用圆角效果 */
  transition: all 0.3s;
}

.subject-item.checked {
  background-color: #f0f7eb;
  border: 2rpx solid #A8BF8F;
}

.subject-name {
  margin-left: 10rpx;
  font-size: 28rpx;
  white-space: nowrap; /* 防止文字换行 */
}

/* 优化checkbox样式 */
.subject-item checkbox {
  transform: scale(0.8);
}

/* 学习统计 */
.study-stats {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.stats-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.stats-item {
  text-align: center;
  flex: 1;
  position: relative;
}

.stats-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #A8BF8F;
  margin-bottom: 8rpx;
  display: block;
}

.stats-label {
  font-size: 24rpx;
  color: #666;
}

.stats-trend, .stats-achievement, .stats-rank {
  font-size: 22rpx;
  color: #666;
  margin-top: 8rpx;
  display: block;
}

.time-picker {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-top: 1rpx solid #eee;
}

.time-label {
  font-size: 28rpx;
  margin-right: 20rpx;
}

.picker-value {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  background-color: #f8f8f8;
  padding: 12rpx 20rpx;
  border-radius: 8rpx;
}

/* 打卡表单 */
.checkin-form {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.mood-selector {
  margin-bottom: 20rpx;
}

.mood-label {
  font-size: 28rpx;
  margin-right: 20rpx;
}

.mood-options {
  display: flex;
  gap: 20rpx;
  margin-top: 10rpx;
}

.mood-item {
  font-size: 40rpx;
  padding: 10rpx;
  border-radius: 8rpx;
}

.mood-item.selected {
  background-color: #f0f7eb;
  transform: scale(1.1);
}

.content-input {
  width: 100%;
  height: 200rpx;
  background-color: #f8f8f8;
  border-radius: 12rpx;
  padding: 20rpx;
  font-size: 28rpx;
  margin-bottom: 10rpx;
}

.word-count {
  text-align: right;
  font-size: 24rpx;
  color: #999;
  margin-bottom: 20rpx;
}

.image-uploader {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.upload-item, .upload-btn {
  width: 200rpx;
  height: 200rpx;
  border-radius: 12rpx;
  position: relative;
  overflow: hidden;
}

.upload-item image {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
  object-fit: cover;
}

.delete-btn {
  position: absolute;
  right: -16rpx;
  top: -16rpx;
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  border-radius: 20rpx;
  font-size: 32rpx;
}

.upload-btn {
  border: 2rpx dashed #ddd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
}

.upload-btn-icon {
  font-size: 60rpx;
  color: #999;
  line-height: 1;
  margin-bottom: 10rpx;
}

.upload-text {
  font-size: 24rpx;
  color: #999;
}

.checkin-options {
  margin-bottom: 40rpx;
  border-bottom: 1rpx solid #eee;
  padding-bottom: 20rpx;
}

.option-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.option-label {
  margin-left: 20rpx;
  font-size: 28rpx;
  color: #333;
}

.today-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-bottom: 40rpx;
}

.tag {
  padding: 12rpx 24rpx;
  background-color: #f8f8f8;
  border-radius: 100rpx;
  font-size: 26rpx;
  color: #666;
  display: flex;
  align-items: center;
  transition: all 0.3s;
}

.tag.active {
  background-color: #A8BF8F;
  color: #fff;
  transform: scale(1.05);
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  border-radius: 44rpx;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ddd;
  color: #fff;
  transition: all 0.3s;
}

.submit-btn.can-submit {
  background-color: #A8BF8F;
  box-shadow: 0 4rpx 12rpx rgba(168, 191, 143, 0.4);
}

/* 动画效果 */
.mood-item {
  transition: all 0.3s;
  cursor: pointer;
}

.mood-item:active {
  transform: scale(0.95);
}

.tag:active {
  transform: scale(0.95);
}

.submit-btn:active {
  transform: scale(0.98);
  opacity: 0.9;
}

/* 响应式调整 */
@media screen and (min-width: 768rpx) {
  .subject-item {
    width: calc(33.33% - 14rpx);
  }
  
  .upload-item, .upload-btn {
    width: 240rpx;
    height: 240rpx;
  }
}
</style>